<template>
    <div class="bg">
        <div class="header">
            <router-link to="/"><el-button class="return_btn" type="primary"><i class="el-icon-back"></i>返回首页</el-button></router-link>
            <h3>旅食记</h3>
        </div>
        <div class="login">
            <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户账号">
                <el-input class="login_input" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="pass">
                <el-input class="login_input" type="password" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>

             <el-button class="login_input" style="margin-left:50px" @click="login">登陆</el-button>
            <el-button class="login_input" style="margin-left:20px">注册</el-button>

        </el-form>
        </div>
        
    </div>
</template>

<script>

export default {
    name: 'Login',
    data() {
        return {
            form: {

                username: '',
                password:'',
            }
        };
    },
    methods: {
        login() {
            this.$http.get("/user/login?username="+this.form.username+"&password="+this.form.password).then(res => {
                if(res.data.code == 200) {
                    window.open("/");
                }else{
                    this.$message.error(res.data.message);
                }
            })
        }
    }



};
</script>

<style scoped>
.bg {
    
    background: url(../assets/home/bg.jpg);
    background-size: 100% 100%;
    width: 100%;
    height: 721px;
    position: relative;
}
.header h3{
    position: absolute;
    margin: 0;
    font-size: 60px;
    top: 55px;
    left: 680px;
    font-family: NSimSun;
}
.return_btn {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    opacity: 0.9;
}
.login {
    position: absolute;
    width: 400px;
    top: 200px;
    left: 35%;
}
.login_input {
    opacity: 0.5;
}
</style>